<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>easy</title>
</head>
<body>
<div id="index">
    <div id="mask_layer">
        <div id="search_div">
            <div id="time_div">
                <span id="hours_span"></span>
                <span id="second_span">:</span>
                <span id="minute_span"></span>
            </div>
            <input id="search_input" type="text" v-model="kw" placeholder="Search" oninput="requestBaidu(this.value)"/>
            <div id="key_word_show">
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        var winWidth;
        var winHeight;
        //获取浏览器窗口宽度
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        } else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        }
        //获取浏览器窗口高度
        if (window.innerHeight) {
            winHeight = window.innerHeight;
        } else if ((document.body) && (document.body.clientHeight)) {
            winHeight = document.body.clientHeight;
        }
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
        }
        getNowTime();
        document.getElementById("index").style.width = winWidth;
        document.getElementById("index").style.height = winHeight;
    })
    window.setInterval(function () {
        document.getElementById("second_span").style.visibility = "visible";
        getNowTime();
    }, 1000)

    //获取当前时间
    function getNowTime() {
        var date = new Date();
        document.getElementById("hours_span").innerText = date.getHours() >= 10 ? date.getHours() : ('0' + date.getHours());
        document.getElementById("minute_span").innerText = date.getMinutes() >= 10 ? date.getMinutes() : ('0' + date.getMinutes());
    }

    function requestBaidu(kw) {
        //百度搜索参数：1.wd=？关键字 2.cl=3/2 网页搜索/图片搜索 3.json=1 返回值为json格式
        var baiduBaseUrl = 'https://www.baidu.com/sugrec?pre=1&p=3&json=1&prod=pc&from=pc_web&wd='
        if (kw != undefined && kw != '' && kw != null) {
            $.ajax({
                type: 'get',
                url: baiduBaseUrl + kw,
                dataType: 'jsonp',
                success: function (result) {
                    var ksl = $('#key_word_show');
                    deleteNode();
                    for (let i = 0; i < result.g.length; i++) {
                        createElements(ksl, 'span', 'kw_search_value', 'ksv', i, result.g[i].q);
                    }
                },
                error: function (result) {
                    console.log(result);
                }
            })
        } else {
            deleteNode();
        }
    }

    /**
     * 创建节点
     * @param parentNode 父节点
     * @param type 节点类型
     * @param className 节点classname
     * @param idPre 节点id前缀
     * @param index 索引
     * @param value 值
     */
    function createElements(parentNode, type, className, idPre, index, value) {
        var element = document.createElement(type);
        element.id = idPre + index;
        element.className = className;
        element.innerHTML = value;
        parentNode.append(element);
    }

    function deleteNode() {
        var parentNode = document.getElementById('key_word_show');
        var childNodes = parentNode.childNodes;
        for (let i = childNodes.length - 1; i >= 0; i--) {
            parentNode.removeChild(childNodes[i]);
        }
    }

    // 页面跳转
    $("#key_word_show").on("click",function (){
       console.log();
    })
    function requestBaiduByKw(value) {
        var urlHeader = 'https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=';
        var urlTail = '&fenlei=256&rsv_pq=ac99dcf400099d65&rsv_t=70c2mAusNS7LBXsP4aeeQ7VRutMN5gd%2F3AXgMYBouXO7n4KJTw7OEm5bSmQ&rqlang=cn&rsv_enter=1&rsv_dl=ts_6&rsv_sug3=6&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=12121&rsp=6&inputT=3318540&rsv_sug4=3318902';
        window.open(urlHeader + value + urlTail);
    }

    $(".kw_search_value").hover(function () {
        INDEX.post.$data.kw = value;
    })
</script>
<style>
    * {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    /*为什么要将背景图片设置成body的背景，之前是设置成index这个div的，如果设置成div的背景图片那么在缩放浏览器时背景图片会随着div的缩小而缩小*/
    body {
        /*这里在css设置背景图片，如果使用 img 标签进行设置的话，会遮盖掉其它元素*/
        /*背景1：https://z3.ax1x.com/2021/06/02/2MsfsS.jpg*/
        /*背景2：https://z3.ax1x.com/2021/06/02/2MxLpn.jpg*/
        background-image: url("https://z3.ax1x.com/2021/06/02/2MsfsS.jpg");
        background-size: cover;
        width: 100%;
        height: 100%;
        z-index: 1;
        /*这个是保证背景图片不会被放大*/
        position: absolute;
        top: 0;
        left: 0;
        /*同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器*/
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-attachment: scroll;
    }

    #index {
        width: 1920px;
        height: 937px;
        z-index: 2;
        display: block;
    }

    #search_div {
        margin: 0 auto;
        height: 1920px;
        width: 937px;
        z-index: 4;
        text-align: center;
    }

    #search_input {
        width: 500px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.7);
        border: none;
        /*去除输入框聚焦时出现的外边框*/
        outline: none;
        border-radius: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
        color: grey;
    }

    #search_input:hover {
        box-shadow: 0px 0px 3px 4px whitesmoke;
    }

    #mask_layer {
        /*这个是保证背景图片不会被放大缩小*/
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: 3;
    }

    #time_div {
        margin-top: 20%;
        z-index: 4;
        text-align: center;
        margin-bottom: 20px;
    }

    #hours_span, #minute_span, #second_span {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 40px;
        color: whitesmoke;
    }

    #key_word_show {
        margin: 30px auto;
        width: 500px;
        height: auto;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 30px;
        z-index: 4;
    }

    #kw_search_list li:first-child {
        padding-top: 25px;
    }

    #kw_search_list li {
        font-size: 15px;
        color: #999797;
        font-family: "Andale Mono";
    }

    .kw_search_value {
        display: inline-block;
        width: 500px;
        height: 25px;
        animation-name: ksv;
        color: whitesmoke;
    }

    .kw_search_value:hover {
        background-color: grey;
        cursor: pointer
    }

    #kw_search_list li:last-child {
        padding-bottom: 25px;
    }

    /*@keyframes kws_a {*/
    /*    from {height: 0px}*/
    /*   to {height: 500px;}*/
    /*}*/
</style>